<template>
	<view class="tab-bar">
		<view class="content">
			<view
				class="one-tab"
				v-for="(item, index) in tabBarList.filter(
					(i) => i.pathType === pathType
				)"
				:key="index"
				@click="selectTabBar(item)"
			>
				<view>
					<view class="tab-img">
						<image
							v-if="pagePath === item.pagePath"
							class="img"
							:src="item.selectedIconPath"
						></image>
						<image v-else class="img" :src="item.iconPath"></image>
					</view>
				</view>
				<view
					class="tit"
					:class="pagePath === item.pagePath ? 'active' : ''"
					>{{ item.text }}</view
				>
			</view>
			<uni-badge
				v-if="approvalNumber"
				class="uni-badge-position"
				:text="approvalNumber"
				max-num="99"
				absolute="rightTop"
				size="normal"
				:offset="[10, 6]"
			></uni-badge>
		</view>
	</view>
</template>

<script>
export default {
	name: 'custom-tabbar',
	props: {
		pagePath: String,
		approvalNumber: {
			type: Number,
			value: 0,
			default: 0,
		},
		pathType: {
			type: String,
			value: 'pages',
			default: 'pages',
		},
	},
	data() {
		return {
			tabBarList: [
				{
					pagePath: '/pages/index/index',
					iconPath: '../../static/img/workbenchW.png',
					selectedIconPath: '../../static/img/workbench.png',
					text: '工作台',
					pathType: 'pages',
				},
				{
					pagePath: '/pages/collaborate/index',
					iconPath: '../../static/img/collaborateW.png',
					selectedIconPath: '../../static/img/collaborate.png',
					text: '协作',
					pathType: 'pages',
				},
				{
					pagePath: '/pages/message/index',
					iconPath: '../../static/img/messageW.png',
					selectedIconPath: '../../static/img/message.png',
					text: '消息',
					pathType: 'pages',
				},
				{
					pagePath: '/pages/circle/index',
					iconPath: '../../static/img/circleW.png',
					selectedIconPath: '../../static/img/circle.png',
					text: '圈子',
					pathType: 'pages',
				},
				{
					pagePath: '/pages/my/index',
					iconPath: '../../static/img/myW.png',
					selectedIconPath: '../../static/img/my.png',
					text: '我的',
					pathType: 'pages',
				},
				{
					pagePath: 'workbench',
					iconPath: '../../static/img/benchW.png',
					selectedIconPath: '../../static/img/bench.png',
					text: '工作台',
					pathType: 'subPackagesIndex',
				},
				{
					pagePath: 'approvalCenter',
					iconPath: '../../static/img/approveW.png',
					selectedIconPath: '../../static/img/approve.png',
					text: '审批中心',
					pathType: 'subPackagesIndex',
				},
				{
					pagePath: 'statistics',
					iconPath: '../../static/img/statisticsW.png',
					selectedIconPath: '../../static/img/statistics.png',
					text: '统计',
					pathType: 'subPackagesIndex',
				},
			],
		}
	},
	onLoad() {
		this.pagePath
	},
	methods: {
		selectTabBar(path) {
			if (path.pathType === 'pages') {
				uni.switchTab({
					url: path.pagePath,
				})
			} else {
				this.$emit('changeTabbar', path)
			}
		},
	},
}
</script>

<style scoped lang="scss">
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100rpx;
	width: 100vw;
	padding: 20rpx;
	border-top: 2rpx solid #eeeeee;
	padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	background-color: #fff;
	z-index: 9;
	.content {
		display: flex;
		width: 100%;
		.one-tab {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 50%;
			.tab-img {
				width: 50rpx;
				height: 50rpx;
				.img {
					width: 100%;
					height: 100%;
				}
			}

			.tit {
				font-size: 40rpx;
				transform: scale(0.7);
				color: #bebebe;
				&.active {
					color: $primary-color;
				}
			}
		}
	}
}
// .tab-bar {
// 	position: fixed;
// 	bottom: 0;
// 	left: 0;
// 	height: 50px;
// 	width: 100vw;
// 	// padding: 20rpx;
// 	border-top: 2rpx solid #eeeeee;
// 	padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
// 	padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
// 	background-color: #fff;
// 	z-index: 99999;
// 	.content {
// 		display: flex;
// 		width: 100%;
// 		padding-top: 10rpx;
// 		.one-tab {
// 			display: flex;
// 			flex-direction: column;
// 			align-items: center;
// 			width: 50%;
// 			.tab-img {
// 				width: 50rpx;
// 				height: 50rpx;
// 				.img {
// 					width: 100%;
// 					height: 100%;
// 				}
// 			}
// 			.tit {
// 				font-size: 32rpx;
// 				margin-top: 5rpx;
// 				color: #BEBEBE;
// 				transform: scale(0.7);
// 				&.active {
// 					color: $primary-color;
// 				}
// 			}
// 		}
// 	}
// }
.uni-badge-position {
	position: absolute;
	left: 58%;
	top: -10%;
}
</style>
